<script setup lang='ts'>
const list = [
  {
    img: 'https://robot-sz.oss-cn-shanghai.aliyuncs.com/2025/01/02/90fd717606c7428aa9b00bb027b6fbcazhihu.png',
    title: '去知乎',
    cb: () => {
      window.open('https://www.zhihu.com/signin?next=%2F', '_blank')
    },
  },
  {
    img: 'https://robot-sz.oss-cn-shanghai.aliyuncs.com/2025/01/02/dfe4d8a719cd4df8a446bb5cf53af48a2048.png',
    title: '小游戏',
    cb: () => {
      window.open('https://cn.newdoku.com/2048.php', '_blank')
    },
  },
  {
    img: 'https://robot-sz.oss-cn-shanghai.aliyuncs.com/2025/01/02/dd07c5bfbcbd4331a176bcec0b35efbcjson.png',
    title: '在线格式转换',
    cb: () => {
      window.open('https://www.bt.cn/tools/json.html', '_blank')
    },
  },
  {
    img: 'https://robot-sz.oss-cn-shanghai.aliyuncs.com/2025/01/02/127dd8ff41bc4f458d872efe7ad64e72baidu.png',
    title: '上百度',
    cb: () => {
      window.open('https://www.baidu.com', '_blank')
    },
  },
]
</script>

<template>
  <div class='w-full min-h-18 bg-white p-3 rounded'>
    <div>
      <div class='flex justify-between px-3 items-center mt-4'>
        <div
          v-for='(item, index) in list'
          :key='index'
          :title='item.title'
          class='w-12 h-12 rounded-full'
          @click='item.cb'
        >
          <img
            :src='item.img'
            alt=''
            style='width: 50px;height: 50px;border-radius: 50%'
            class='rounded-full'
          />
        </div>
      </div>
    </div>
  </div>
</template>
